import React, {useState, useEffect, Component} from 'react';
import PropTypes from 'prop-types';
import {Image, Dimensions, StyleSheet, TouchableOpacity} from 'react-native';
import {
  View,
  ScrollView,
  Text,
  Input,
  Button,
  Box,
  Flex,
  Spacer,
  Center,
  VStack,
  Column,
  SafeAreaView,
  Container,
} from 'native-base';
const {width: screenWidth, height: screenHeight} = Dimensions.get('window');
import ZoomPictureModel from '../../commponents/printing/ZoomPictureModel';
const ScaledImage = props => {
  const {uri} = props;
  const [source, setSource] = useState({uri: props.uri});
  const styles = props.style ? props.style : {}; // 定义其他样式

  useEffect(() => {
    Image.prefetch(props.uri);
    Image.getSize(
      props.uri,
      (width, height) => {
        setSource({
          uri: props.uri,
          width: '100%',
          height: Math.floor((screenWidth / width) * height),
        });
        // console.log(source);
      },
      error => console.log(error),
    );
    return () => {
      console.log('卸载');
      // setSource({});
    };
  }, [source.width, props.uri]);

  const imageStyle = {
    width: source?.width || 0,
    height: source?.height || 0,
    ...styles,
  };

  return (
    <View style={styles.container}>
      <Image
        source={{uri: source.uri}}
        style={imageStyle}
        onError={e => {
          console.log(e.nativeEvent.error);
          // setSource({uri: `https:${props.uri.split(':')[1]}`, ...imageStyle});
        }}
        // fallbackSource={require('../../assets/error.webp')}
      />
      <Text>{source.uri}</Text>
      <Text>{source.width}</Text>
    </View>
    // <Image
    //   source={{uri: source.uri}}
    //   style={imageStyle}
    //   defaultSource={require('../../assets/error.webp')}
    // />
  );
};

ScaledImage.propTypes = {
  uri: PropTypes.string.isRequired,
  width: PropTypes.number,
  height: PropTypes.number,
};

export default ScaledImage;

const styles = StyleSheet.create({
  container: {
    padding: 40,
    paddingBottom: 0,
    backgroundColor: '#EDEDED',
    height: '100%',
  },
  imgContainer: {
    flex: 1,
  },
});
